<template>
  <div class="app-container pb-10">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">类型:</div>
            <div class="text-14px ml-3">
              <span v-if="formData.project_type == 1">合伙人</span>
              <span v-else>项目库</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">项目名称:</div>
            <div class="text-14px ml-3">
              {{ formData.name }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">项目全称:</div>
            <div class="text-14px ml-3">
              {{ formData.project_name }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">城市:</div>
            <div class="text-14px ml-3">
              {{ formData.city_id }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">详细地址:</div>
            <div class="text-14px ml-3">
              {{ formData.address }}
            </div>
          </div>
        </el-col>


        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">行业:</div>
            <div class="text-14px ml-3">
              {{ formData.industry }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">标签:</div>
            <div class="text-14px ml-3 flex">
              <div class="border  mr-2" v-for="item in formData.label">{{ item }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">手机号码:</div>
            <div class="text-14px ml-3">
              {{ formData.tel }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">QQ号:</div>
            <div class="text-14px ml-3">
              {{ formData.qq }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">微信:</div>
            <div class="text-14px ml-3">
              {{ formData.wechat }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">邮箱号:</div>
            <div class="text-14px ml-3">
              {{ formData.emil }}
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">项目简介:</div>
            <div class="text-14px ml-3">
              {{ formData.describe }}
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">项目主图:</div>
            <div class="text-14px ml-3">
              <div v-for="(item, index) in formData.proImage" :key="index">
                <el-image preview-teleported style="width: 60px; height: 60px" :src="item" :zoom-rate="1.2"
                  :max-scale="7" :min-scale="0.2" :preview-src-list="formData.proImage"
                  :initial-index="formData.proImage.length" fit="cover"></el-image>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">项目图片:</div>
            <div class="text-14px ml-3 flex flex-wrap w-[400px]">
              <div class="mr-2" v-for="(item, index) in formData.proImages" :key="index">
                <el-image preview-teleported style="width: 60px; height: 60px" :src="item" :zoom-rate="1.2"
                  :max-scale="7" :min-scale="0.2" :preview-src-list="formData.proImages"
                  :initial-index="formData.proImages.length" fit="cover"></el-image>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">项目内容:</div>
            <div class="text-14px ml-3">
              {{ formData.content }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">风险描述:</div>
            <div class="text-14px ml-3">
              {{ formData.risk_description }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">项目评估:</div>
            <div class="text-14px ml-3">
              {{ formData.assessment }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">项目总预算:</div>
            <div class="text-14px ml-3">
              {{ formData.budget }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-100px text-right">项目利益:</div>
            <div class="text-14px ml-3">
              {{ formData.related_interests }}
            </div>
          </div>
        </el-col>

        <el-col :span="24">
          <div class="font-bold !w-100px text-right mt-10">项目计划:</div>
          <el-row :gutter="10" v-for="item in formData.plan" :key="item.id" class="mt-4">
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-100px text-right">计划名:</div>
                <div class="text-14px ml-3">
                  {{ item.name }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-100px text-right">预算:</div>
                <div class="text-14px ml-3">
                  {{ item.budget }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-100px text-right">开始时间:</div>
                <div class="text-14px ml-3">
                  <template v-if="item.start_time > 0">
                    {{ formatTimestamp(item.start_time) }}
                  </template>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-100px text-right">结束时间:</div>
                <div class="text-14px ml-3">
                  <template v-if="item.end_time > 0">
                    {{ formatTimestamp(item.end_time) }}
                  </template>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-100px text-right">描述:</div>
                <div class="text-14px ml-3">
                  {{ item.other }}
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>


        <el-col :span="24">
          <div class="font-bold !w-100px text-right mt-10">相关资料:</div>
          <el-row :gutter="10" v-for="item in formData.project_partner_data" :key="item.id" class="mt-4">
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-100px text-right">资料名称:</div>
                <div class="text-14px ml-3">
                  {{ item.name }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex items-center mb-4">
                <div class="font-bold !w-100px text-right">图片:</div>
                <div class="text-14px ml-3 flex flex-wrap w-[400px]">
                  <div class="mr-2" v-for="(info, index) in item.images" :key="index">
                    <img width="100" height="100" :src="info" alt="">
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>

    <div class="fixed bottom-0 left-0 bg-[#fff] w-[100%] flex justify-center border-t-1 py-2 border-[#e4e7ed]">
      <template v-if="formData.send_audit == 0">
        <el-button v-hasPerm="['project/audit']" @click="handleAudit('return')">驳回</el-button>
        <el-button v-hasPerm="['project/audit']" type="primary" @click="handleAudit('commit')">通过</el-button>
      </template>
      <template v-if="formData.send_audit == 1">
        <el-button v-hasPerm="['project/audit']" @click="handleAudit('again')">再次驳回</el-button>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import ProjectAPI from "@/api/partner";
import { useRoute } from "vue-router";
const route = useRoute();
import { formatTimestamp } from '@/utils/index'

const formData = ref<any>({});
const getDataInfo = () => {
  ProjectAPI.getFormData({ id: route.query.id }).then((data) => {
    data.proImages = data.images == "" ? [] : data.images.split(',');
    data.proImage = data.image == "" ? [] : data.image.split(',');

    // 项目计划图片转换为数组
    if (data.project_partner_data) {
      data.project_partner_data.forEach((item: any) => {
        item.images = item.image == "" ? [] : item.image.split(',');
      });
    }

    if (data.plan) {
      data?.plan?.forEach((item: any) => {
        item.end_time = item.end_time == 0 ? '' : item.end_time * 1000;
        item.start_time = item.start_time == 0 ? '' : item.start_time * 1000;
      });
    }
    let info = { ...data };
    formData.value = info;
  });
}

// 提交审核
const handleAudit = (type: string) => {
  ElMessageBox.prompt(
    "请输入用户「" + formData.value.name + "」的审核",
    `${type == 'commit' ? '通过' : type == 'return' ? '驳回' : '再次驳回'}`,
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputType: 'textarea',
    },
  ).then(
    ({ value }) => {
      ProjectAPI.getAudit({ id: formData.value.id, type, err_note: value }).then(() => {
        ElMessage.success("操作成功");
        getDataInfo();
      });
    },
    () => {
      ElMessage.info("已取消");
    }
  );
}

onMounted(() => {
  getDataInfo();
});
</script>
